@extends('layouts.admin')

@section('title', '岗位管理-编辑')

@section('style')
    <link rel="stylesheet" type="text/css" href="{{asset('lib/bootstrap/css/multiple-select.css')}}" />
@endsection

@section('content')
    <div id="tab_station" class="HuiTab">
        <div class="tabBar clearfix"><span>岗位设置</span><span>岗位成员管理</span></div>
        <div class="tabCon">
            <article class="page-container">
                <form action="" method="post" class="form form-horizontal" id="form-techValue-edit">
                    <input type="hidden" name="id" id="id" value="{{$editEntity['data']['id']}}">
                    <div class="row cl">
                        <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>名称：</label>
                        <div class="formControls col-xs-4 col-sm-4">
                            <input type="text" class="input-text" value="{{$editEntity['data']['name']}}" placeholder="" id="name" name="name">
                        </div>
                    </div>
                    <div class="row cl">
                        <label class="form-label col-xs-4 col-sm-3">岗位分类：</label>
                        <div class="formControls col-xs-4 col-sm-4">
                              <span class="select-box">
                              <select class="select" size="1" id="station_class_id" name="station_class_id">
                                @foreach($stationClasses as $stationClass)
                                      <option value="{{$stationClass->id}}">{{$stationClass->name}}</option>
                                  @endforeach
                              </select>
                        </span>
                        </div>
                    </div>
                    <div class="row cl">
                        <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                            <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
                        </div>
                    </div>
                </form>
            </article>
        </div>
        <div class="tabCon">
            <article class="page-container">
                <div class="col-xs-12 col-sm-12">
                    <div class="row cl">
                        <div class="mt-5 ml-10 mr-10">
                            <table id="listTable" class="table table-border table-bordered table-bg table-hover">
                                <thead>
                                <tr class="text-c">
                                    <th><input type="checkbox" name="checkList"/></th>
                                    <th>姓名</th>
                                    <th>主要部门</th>
                                    <th>主要岗位</th>
                                    <th>手机</th>
                                    <th>微信号</th>
                                    <th>账号状态</th>
                                    <th>创建时间</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </article>
        </div>
    </div>

    <div id="modal-add-user" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content radius">
                <div class="modal-header">
                    <h3 class="modal-title">新增用户至岗位</h3>
                    <a class="close" data-dismiss="modal" aria-hidden="true" href="javascript:void();">×</a>
                </div>
                <div class="modal-body">
                    <p>
                        <select  id="user_select" style="width: 100%;">
                            @foreach($users as $user)
                                <option value="{{$user->id}}">{{$user->name}}</option>
                            @endforeach
                        </select>
                    </p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary model_add_user_btn">保存</button>
                    <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script type="text/javascript" src="{{asset('lib/bootstrap/multiple-select.js')}}?snt=1"></script>
    <script>
        $(function(){$("#tab_station").Huitab();})
        $("#station_class_id").val({{$editEntity['data']['station_class_id']}});
        $("#form-techValue-edit").validate({
            rules:{
                name:{
                    required:true
                }
            },
            onkeyup:false,
            focusCleanup:true,
            success:"valid",
            submitHandler:function(form){
                $(form).ajaxSubmit({
                    type: 'post',
                    url: "{{url('personnel/station/edit')}}",
                    success: function(data){
                        if(data['successFlag']==1){
                            layer_success_message("编辑成功!");
                            parent.$(".btnSearch").click();
                        }else{
                            layer_error_message(data['msg']);
                        }
                    },
                    error: function(XmlHttpRequest, textStatus, errorThrown){
                        layer_error_message('编辑失败!');
                    }
                });
            }
        });
    </script>
    <script>
        var $dataTable=null;
        var $MAIN={currentPage:1,StatusType:{ON_WORK:1,LOCK:2,LEAVE:3}}
        $(function(){
            $dataTable=$('#listTable').dataTable({
                "sPaginationType" : "full_numbers",
                "processing": true,
                "serverSide": true,
                "searching": false,
                "dom": '<l<\'#topPlugin\'>f>rt<ip><"clear">',
                "ajax":{
                    "url":"{{url('system/user/list')}}",
                    "type": 'post',
                    "data": function ( d ) {
                        d.name= $("#query_name").val();
                        d.station_id='{{$editEntity['data']['id']}}';
                        d.page=$MAIN.currentPage;
                    },
                    'dataSrc':function(result){
                        var datas=result.data;
                        if(datas){
                            for(var i=0;i<datas.length;i++){
                                datas[i].DT_RowClass='text-c';
                            }
                        }
                        return datas;
                    }
                },
                "columnDefs": [{
                    "targets": "_all",
                    "searchable":false
                },{
                    "targets": [0,1,4,5],
                    "orderable":false
                }],
                "columns": [
                    {
                        "data": "id",
                        "render": function (data, type, row, meta) {
                            return '<input type="checkbox"  name="checkList" class="checkchild"  value="' + data + '" />';
                        }
                    },
                    { "data": "name"},
                    { "data": "major_department_name"},
                    { "data": "major_station_name" },
                    { "data": "phone" },
                    { "data": "wx_no" },
                    { "data": "account_status","render": function (data, type, row, meta) {
                        if(data==$MAIN.StatusType.ON_WORK){return '<span class="label label-success radius">在职</span>';}
                        if(data==$MAIN.StatusType.LOCK){return '<span class="label label-warning radius">锁定</span>';}
                        if(data==$MAIN.StatusType.LEAVE){return '<span class="label label-danger radius">离职</span>';}
                    }},
                    { "data": "created_at" }
                ],
                drawCallback: function( settings ) {
                    $('input[name=checkList]')[0].checked=false;
                },
                "initComplete":function(settings, json){
                    var topPlugin='<button class="btn btn-danger radius delSelectBtn"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</button> ' +
                        '<button class="btn btn-primary radius addBtn" ><i class="Hui-iconfont">&#xe600;</i>新增用户</button>'+
                        '&nbsp;<input type="text" class="input-text radius size-M" id="query_name" style="width: 200px;" placeholder="输入姓名查询">'+
                        '&nbsp; <button type="button" class="btn btn-success radius btnSearch"><i class="Hui-iconfont">&#xe665;</i> 搜索</button>'
                    $("#topPlugin").append(topPlugin);
                }
            });
            $dataTable.on( 'page.dt', function () {
                var info = $dataTable.api();
                $MAIN.currentPage=parseInt(info.page())+1;
            } );
        });

        $MAIN.search=function(){
            $dataTable.api().ajax.reload();
        }
        $MAIN.getSelectCheckBoxValue=function(){
            var theArray=[];
            $("input[name=checkList]:checked").each(function() {
                theArray.push($(this).val());
            });
            return theArray;
        }
        $MAIN.deleteData=function(ids){
            layer.confirm('确定要从改岗位中移除选中的用户吗？',{
                    btn: ['确定','取消'],
                    shade: false,
                    closeBtn: 0
                },
                function(){
                    $.ajax({
                        url: "{{url('system/user/deleteStation')}}",
                        data:{ids:ids,station_id:'{{$editEntity['data']['id']}}'},
                        dataType: 'json',
                        type:'post',
                        success: function(data){
                            if(data['successFlag']==1){
                                layer_success_message('删除成功!');
                                $MAIN.search();
                                parent.$MAIN.search();
                            }else{
                                layer_error_message(data['msg']);
                            }
                        },
                        error:function(data) {
                            layer_error_message('删除失败!');
                        },
                    });
                });
        }
        $(function(){
            $("#user_select").multipleSelect({
                filter: true,
                placeholder: "请选择用户"
            });
            $(document).on("click",".btnSearch",function(){
                $MAIN.search();
            });
            $(document).on("click",".delSelectBtn",function(){
                var ids=$MAIN.getSelectCheckBoxValue();
                if(ids.length<=0){
                    layer.msg('请选择需要从岗位中移除的人员', {icon:5,time:1000});
                }else{
                    $MAIN.deleteData(ids);
                }
            });
            $(document).on("click",".addBtn",function(){
              $("#modal-add-user").modal("show");
            });

            $(".model_add_user_btn").click(function(){
                var $ids= $('#user_select').multipleSelect('getSelects');
                console.info($ids);
                $.ajax({
                    url: "{{url('system/user/addStation')}}",
                    data:{ids:$ids,station_id:'{{$editEntity['data']['id']}}'},
                    dataType: 'json',
                    type:'post',
                    success: function(data){
                        if(data['successFlag']==1){
                            layer_success_message('操作成功!');
                            $MAIN.search();
                            parent.$MAIN.search();
                            $("#modal-add-user").modal("hide");
                        }else{
                            layer_error_message(data['msg']);
                        }
                    },
                    error:function(data) {
                        layer_error_message('删除失败!');
                    },
                });
            });
        })
    </script>
@endsection